<template>
  <div>
    <Detail :detailForm="detailForm" @editHandle="editHandle"></Detail>

    <div style="padding: 15px 20px">
      <div class="left-title">商品sku</div>

      <div class="flex-jc-s-b">
        <el-button style="margin-top: 20px" @click="showSkuDialog()">新增sku</el-button>
        <el-button style="margin-top: 20px" type="primary" @click="saveAllSku()">保存sku</el-button>
      </div>

      <el-table
          :data="data.tableData"
          row-key="id"
      >
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="courseList" label="关联课程" >
          <template #default="scope">
            <span>{{ list2String(scope.row.courseList) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="realPrice" label="价格" />
        <el-table-column label="操作" >
          <template #default="scope">
            <el-button type="primary" plain @click="showSkuDialog(scope.row, true)">修改</el-button>
            <el-button type="danger" plain @click="deleteItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <form-dialog v-model="skuDialogVisible" :title="data.skuDialogTitle" @save="saveSku()">
      <el-form :rules="skuRules" :model="data.skuForm" label-width="120px" style="width: 100%">
        <el-form-item label="名称" prop="name">
          <el-input maxlength="50" v-model="data.skuForm.name" placeholder="请输入名称" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="关联课程" prop="courseIdList">
          <el-select multiple clearable collapse-tags="true" v-model="data.skuForm.courseIdList" placeholder="请选择关联课程">
            <el-option v-for="item in data.courseList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="价格" prop="realPrice">
          <el-input type="number" v-model="data.skuForm.realPrice" placeholder="请输入价格" style="width: 80%"/>
        </el-form-item>
      </el-form>
    </form-dialog>

  </div>
</template>

<script setup>
import Detail from  '@/views/common/component/detail'

import {getCurrentInstance, onMounted, reactive, ref} from 'vue'
import { useRouter } from 'vue-router'
import {useRoute} from 'vue-router/dist/vue-router'
import {ElMessage} from "element-plus";
import {idList2ItemList, list2String} from "../../../../utils/common";
import {editGoods, getGoodsDetail} from "../../../../api/goods";
import {listCourse} from "../../../../api/course";
const router = useRouter()
const route = useRoute()

const { proxy } = getCurrentInstance()

const skuDialogVisible = ref(false)

const data = reactive({
  tableData:[],
  skuDialogTitle: '保存sku',
  skuForm: {}
})

const detailForm = reactive({
  column:[
    {
      name:'名称',
      code: 'name'
    },
    {
      name:'年份',
      code: 'examYear'
    },
    {
      name:'课程类目',
      code: 'categoryName'
    },
    {
      name:'有效期',
      code: 'validStartTime',
      formatter: (row)=>{
        let startTime = row.validStartTime
        let endTime = row.validEndTime
        return startTime + '-' + endTime
      }
    },
    {
      name:'老师',
      code: 'teacherList',
      formatter: (row)=>{
        return list2String(row.teacherList)
      }
    },
    {
      name:'标签',
      code: 'tagLabel'
    },
    {
      name:'亮点',
      code: 'tagHighlightList',
      formatter: (row)=>{
        return list2String(row.tagHighlightList)
      }
    },
    {
      name:'特色',
      code: 'tagServiceList',
      formatter: (row)=>{
        return list2String(row.tagServiceList)
      }
    },
    {
      name:'价格',
      code: 'realPrice'
    },
    {
      name:'封面',
      code: 'picUrl',
      isImage: true
    },
    {
      name:'状态',
      code: 'publishedFlag',
      formatter: (row)=>{
        return row.publishedFlag == 1? '上架' : '下架'
      }
    },
    {
      name:'说明',
      code: 'descr'
    },
  ],
  data: {},
  hasEdit: true
})
const initInfo = () => {
  getGoodsDetail(route.query.id || '').then((res) => {
    let resData = res.data
    detailForm.data = resData
    let skuList = resData.skuList
    data.tableData = skuList

    // let condition = {examYear: resData.examYear, publishedFlag: 1, categoryId: resData.categoryId}
    let condition = {examYear: resData.examYear, publishedFlag: 1}
    listCourse(condition).then((couresRes)=>{
      data.courseList = couresRes.rows
    })
  })
}

const editHandle = () => {
  router.push({
    path: '/modules/goods/goods/save',
    query: { id: route.query.id, type: 'edit' }
  })
}

const skuRules = ({
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  courseIdList: [{ required: true, message: '请请选择课程', trigger: 'blur' }],
  realPrice: [{ required: true, message: '请输入价格', trigger: 'blur' }]
})

onMounted(() => {
  initInfo()
})

const showSkuDialog = (targetItem, isEdit) => {
  skuDialogVisible.value = true
  if (isEdit){
    Object.assign(data.skuForm, targetItem)
  }else{
    data.skuForm = {}
  }
  data.skuForm.isEdit = isEdit
}

const saveSku = () => {
  let item = data.skuForm
  let newItem = {}
  Object.assign(newItem, item)
  let list = idList2ItemList(data.courseList, item.courseIdList)
  newItem.courseList = list
  if (item.isEdit) {
    let targetItem = data.tableData.find((value)=> value.id == newItem.id)
    Object.assign(targetItem, newItem)
  }else {
    data.tableData.push(newItem)
  }
  skuDialogVisible.value = false
}

const deleteItem = (item) => {
  proxy.$modal.confirm("确定删除该数据？").then(() => {
    let list = data.tableData
    const index = list.findIndex((value) => value.id === item.id)
    list.splice(index, 1)
  })
}

const saveAllSku = () => {
  let treeList = data.tableData
  let reqItem = {id: detailForm.data.id, skuList: treeList}
  editGoods(reqItem).then((res)=>{
    ElMessage.success('操作成功')
  })
}

</script>

<style>
  .el-form .el-select{
    width: 80%;
  }
  .el-select .el-input{
    width: 100%;
  }
</style>
